<script setup lang="ts">
import { useRouter } from 'vue-router';

import Icon403 from '@/pages/error/icon-403.vue';

const { push } = useRouter();

// 返回首页
function back() {
  push({
    path: '/',
  });
}
</script>

<template>
  <div class="flex size-full flex-col items-center justify-center duration-300">
    <Icon403 />

    <div class="flex flex-col justify-center items-center">
      <p class="text-foreground mt-8 text-2xl md:text-3xl lg:text-4xl">
        访问被拒绝
      </p>
      <p class="text-muted-foreground md:text-md my-4 lg:text-lg">
        抱歉，您没有权限访问此页面。
      </p>
      <NButton type="primary" @click="back">
        返回首页
      </NButton>
    </div>
  </div>
</template>

<style scoped lang="less">

</style>
